<template>
  <div class="outer">
    <Tap title="美食">
      <template v-slot:content>
        <img
          width="200"
          height="120"
          src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.jj20.com%2Fup%2Fallimg%2F1115%2F101621120310%2F211016120310-6-1200.jpg&refer=http%3A%2F%2Fimg.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1661941825&t=f65f9690887185aa22c6ec195d65a3af"
        />
      </template>
      <template #footer>
        <span> 美食详情 </span>
      </template>
    </Tap>
    <Tap :title="tapData.title">
      <template #content>
        <ul class="list">
          <li v-for="(list, index) in tapData.list" :key="index">{{ list }}</li>
        </ul>
      </template>
      <template #footer>
        <div>
          <a href="###">Switch游戏下载</a>
        </div>
      </template>
    </Tap>
    <Tap title="电影">
      <template #content>
        <div>
          <video width="200" src="" autoplay muted controls></video>
        </div>
      </template>
      <template #footer>
        <div>
          电影介绍
        </div>
      </template>
    </Tap>
  </div>
</template>

<script>
import { v4 as uuidv4 } from "uuid";
import Tap from "./Tap";
export default {
  name: "app",
  components: {
    Tap,
  },
  data() {
    return {
      tapData: {
        id: uuidv4(),
        title: "游戏",
        list: ["奥日与萤火意志", "塞尔达旷野之息", "异度之刃2", "马里奥奥德赛"],
      },
    };
  },
};
</script>

<style scoped>
.outer {
  background-color: rgb(207, 255, 220);
  display: flex;
  width: 800px;
  justify-content: space-between;
}
.list {
  list-style-type: none;
  margin-left: -40px;
}
</style>